<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>统计</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      body { font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #121212; }
      .main-card {
        background: linear-gradient(120deg, #1F1F1F 60%, #2A2A2A 100%);
        border-radius: 22px;
        box-shadow: 0 6px 32px #000A, 0 1.5px 0 #232323 inset;
        margin-bottom: 28px;
        padding: 28px 20px;
        border: 1.5px solid #232323;
        backdrop-filter: blur(4px);
        position: relative;
        overflow: hidden;
      }
      .main-card::before {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; height: 4px;
        background: linear-gradient(90deg, #FE2C55 0%, #00F2EA 100%);
        border-radius: 22px 22px 0 0;
        opacity: 0.8;
      }
      .section-title { font-size: 18px; font-weight: 600; color: #FE2C55; margin-bottom: 16px; display: flex; align-items: center; letter-spacing: 1px; }
      .section-title i { margin-right: 8px; color: #FE2C55; }
      .stat-bar { background: linear-gradient(90deg, #232323 60%, #2A2A2A 100%); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 600; color: #fff; box-shadow: 0 2px 8px #FE2C5533; }
      .stat-bar span { color: #00F2EA; font-weight: 700; }
      .stat-bar.green { color: #00F2EA; }
      .stat-bar.orange { color: #FFA726; }
      .stat-bar.red { color: #FE2C55; }
    </style>
  </head>
  <body class="min-h-screen">
    <div class="max-w-md mx-auto py-10 px-4">
      <div class="main-card">
        <div class="section-title"><i class="fa fa-chart-bar"></i>点菜统计</div>
        <div class="stat-bar mb-2">
          <span>本周最受欢迎</span><span>红烧肉（8次）</span>
        </div>
        <div class="stat-bar green mb-2">
          <span>本月点菜总数</span><span>32 份</span>
        </div>
        <!-- 菜品热度排行 -->
        <div class="section-title mt-6">
          <i class="fa fa-fire"></i>菜品热度排行
        </div>
        <div id="hot-rank-list"></div>
        <!-- 饮食健康提示 -->
        <div class="section-title mt-6">
          <i class="fa fa-heartbeat"></i>饮食健康提示
        </div>
        <div class="stat-bar orange mb-2" id="health-tip">
          <span>本月荤菜偏多，建议多点蔬菜哦！</span>
        </div>
      </div>
      <script>
        // mock菜品热度排行
        const hotRank = [
          {name:'红烧肉', count: 18, img:'https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290814_1280.jpg'},
          {name:'宫保鸡丁', count: 14, img:'https://cdn.pixabay.com/photo/2015/04/08/13/13/food-712665_1280.jpg'},
          {name:'清炒时蔬', count: 12, img:'https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg'}
        ];
        document.getElementById('hot-rank-list').innerHTML = hotRank.map((item, idx) => `
          <div style="display:flex;align-items:center;gap:0.8rem;margin-bottom:0.7rem;">
            <span style="font-size:1.2rem;font-weight:bold;width:1.8em;text-align:center;color:${idx===0?'#fe2c55':(idx===1?'#ffa726':'#00f2ea')}">#${idx+1}</span>
            <img src="${item.img}" style="width:38px;height:38px;border-radius:10px;object-fit:cover;border:2px solid #00f2ea33;box-shadow:0 1px 4px #00f2ea22;" />
            <span style="flex:1;font-size:1.08rem;">${item.name}</span>
            <span style="font-size:1.05rem;color:#b3e0f7;">${item.count}次</span>
          </div>
        `).join('');
      </script>
      <style>
        .mt-6 { margin-top: 1.5rem; }
      </style>
    </div>
  </body>
</html>
